<template>
	<view class="my-container">
		<view class="my-form">
      <view class="area">
        <view class="cell-column">
        	<view class="cell-text">
        		收货人<text style="color: red;">*</text>
        	</view>
        	<view class="cell-option">
        		<input class="input" v-model="sForm.name" placeholder="请输入收货人" />
        	</view>
        </view>
        <view class="cell-column">
        	<view class="cell-text">
        		电话<text style="color: red;">*</text>
        	</view>
        	<view class="cell-option">
        		<input class="input" type="number" maxlength="11" v-model="sForm.phone" placeholder="请输入电话" />
        	</view>
        </view>
        <view class="cell-column">
        	<view class="cell-text">
        		选择地区<text style="color: red;">*</text>
        	</view>
        	<view class="cell-option">
        		<picker class="selector" mode="multiSelector" :value="selectorValue"
        			@columnchange="bindTypeColumnChange" @change="bindTypeChange" :range="selectorRange"
        			range-key="areaName">
        			<view class="selector-input" :style="{color: selectType ? '' : 'rgba(0,0,0,0.65)'}">
        				{{ selectType ? selectType.areaName.join(' ') : '请选择地区' }}</view>
        			<image class="selectIcon" :src="`${img_baseUrl}/statics/std/static/arr_go.png`">
        			</image>
        		</picker>
        	</view>
        </view>
        <view class="cell-column">
        	<view class="cell-text">
        		详细地址<text style="color: red;">*</text>
        	</view>
        	<view class="cell-option">
        		<input class="input" v-model="sForm.address" placeholder="请输入详细地址" />
        	</view>
        </view>
      </view>
			<view class="area">
        <view class="cell-column" style="flex-direction: row;justify-content: space-between;align-items: center;">
        	<view class="cell-text">
        		设置为默认地址
        	</view>
        	<view class="cell-option" style="display: flex;align-items: center;justify-content: flex-end;">
        		<switch :checked="sForm.isDefault" @change="sForm.isDefault = !sForm.isDefault" color="#3FAA73" />
        	</view>
        </view>
      </view>
		</view>
		<view v-if="id && id != ''" class="my-footer2" :style="{bottom: GET_SAFEAREA_BOTTOM+'px'}">
			<text class="text-left" @click="deleteFun">删除地址</text>
			<text class="text-right" @click="submitFun">保存</text>
		</view>
		<view v-else class="my-footer" :style="{bottom: (GET_SAFEAREA_BOTTOM > 0 ? GET_SAFEAREA_BOTTOM : 34) + 'px'}"
			@click="submitFun">
			<text class="text">保存</text>
		</view>
	</view>
</template>

<script>
	import requestPost, {
		requestDelete,
		requestGet
	} from '@/utils/request.js';
	import {
		mapGetters
	} from 'vuex'
	import store, {
		GET_SAFEAREA_BOTTOM
	} from '../../store/index.js'
	import {
		throttle
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				selectorRange: [],
				selectType: null,
				selectorValue: [0, 0, 0],
				id: null,
				sForm: {
					name: null,
					phone: '',
					address: '',
					isDefault: false
				},
				detail: null,
			};
		},
		computed: {
			...mapGetters([GET_SAFEAREA_BOTTOM])
		},
		onLoad(option) {
			if (option.id && option.id != '') {
				this.id = option.id;
				uni.setNavigationBarTitle({
					title: '编辑地址'
				});
				this.getDetail();
			}
			this.getArea();
		},
		mounted() {
			console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
		},
		methods: {
			getDetail() {
				requestGet(`/mobile/receiveAddress/${this.id}`, {}, '/shop').then(res => {
					console.log('getDetail====', res)
					if (res.code === 200) {
						this.detail = res.data;
						this.sForm = {
							name: res.data.name,
							phone: res.data.phone,
							address: res.data.address,
							isDefault: res.data.isDefault == '0' ? false : true
						}
						this.selectType = {
							code: [res.data.province, res.data.city, res.data.county],
							areaName: [res.data.provinceName, res.data.cityName, res.data.countyName],
						}
					}
				}).catch((err) => console.log('错误了', err))
			},
			getArea() {
				requestGet('/area/getInitData', {}, '/baseplatform').then(res => {
					console.log('getDetail====', res)
					if (res.code === 200) {
						this.selectorRange = [res.data.level1, res.data.level2, res.data.level3]
					}
				}).catch((err) => console.log('错误了', err))
			},
			async getNextAreaByCode(areaCode) {
				let areaList = await requestGet('/area/getNextAreaByCode', {
					areaCode
				}, '/baseplatform');
				return areaList.data
			},
			bindTypeChange(e) {
				console.log('省市区选择====', e);
				const values = e.detail.value; // 获取选择器的值
				const province = this.selectorRange[0][values[0]];
				const city = this.selectorRange[1][values[1]];
				const area = this.selectorRange[2][values[2]];
				this.selectType = {
					code: [province.areaCode, city.areaCode, area.areaCode],
					areaName: [province.areaName, city.areaName, area.areaName],
				}
			},
			async bindTypeColumnChange(e) {
				console.log('省市区选择====变更某列', e);
				const column = e.detail.column; // 改变的列索引
				const value = e.detail.value; // 改变的列的值
				// 判断改变的是省份列还是市列
				if (column === 0) {
					// 根据选择的省份设置市的选项
					let areaList = await requestGet('/area/getNextAreaByCode', {
						areaCode: this.selectorRange[0][value].areaCode
					}, '/baseplatform');
					const cities = areaList.data;
					this.$set(this.selectorRange, 1, cities);
					// 重置市的选中值
					this.$set(this.selectorValue, 1, 0);
					let areaList2 = await requestGet('/area/getNextAreaByCode', {
						areaCode: this.selectorRange[1][0].areaCode
					}, '/baseplatform');
					const areas = areaList2.data;
					this.$set(this.selectorRange, 2, areas);
					// 重置区的选中值
					this.$set(this.selectorValue, 2, 0);
				} else if (column === 1) {
					// 根据选择的市设置区的选项
					let areaList = await requestGet('/area/getNextAreaByCode', {
						areaCode: this.selectorRange[1][value].areaCode
					}, '/baseplatform');
					const areas = areaList.data;
					this.$set(this.selectorRange, 2, areas);
					// 重置区的选中值
					this.$set(this.selectorValue, 2, 0);
				}
			},
			deleteFun() {
				requestDelete(`/mobile/receiveAddress/${this.id}`, {}, '/shop').then(res => {
					console.log('deleteFun====', res)
					if (res.code === 200) {
						uni.navigateBack();
					}
				}).catch((err) => console.log('错误了', err))
			},
			submitFun: throttle(function() {
				if (!this.sForm.name || this.sForm.name == '') {
					uni.showToast({
						title: '请输入收货人姓名！',
						icon: 'none'
					});
					return
				}
				if (!this.sForm.phone || this.sForm.phone == '') {
					uni.showToast({
						title: '请输入电话！',
						icon: 'none'
					});
					return
				}
				if (!this.selectType || this.selectType == '') {
					uni.showToast({
						title: '请选择地区！',
						icon: 'none'
					});
					return
				}
				if (!this.sForm.address || this.sForm.address == '') {
					uni.showToast({
						title: '请输入详细地址！',
						icon: 'none'
					});
					return
				}
				uni.showLoading({
					title: '保存数据中'
				});
				const areaList = {
					province: this.selectType.code[0],
					provinceName: this.selectType.areaName[0],
					city: this.selectType.code[1],
					cityName: this.selectType.areaName[1],
					county: this.selectType.code[2],
					countyName: this.selectType.areaName[2],
				}
				let params = {
					...this.sForm,
					isDefault: this.sForm.isDefault ? 1 : 0,
					...areaList
				};
				if (this.id) params = {
					...this.detail,
					...params
				};
				console.log('/mobile/receiveAddress======params', params, this.sForm.isDefault)
				requestPost('/mobile/receiveAddress', params, '/shop', this.id ? 'PUT' : 'POST').then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						uni.showToast({
							title: '操作成功！'
						});
						uni.navigateBack();
					} else {
						uni.showToast({
							title: res.msg || '操作失败！',
							icon: 'none'
						});
					}
				})
			}, 500),
		}
	};
</script>

<style lang="scss" scoped>
	.my-container {
		position: relative;
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
    background: #F5F7F6;

		.my-form {
			width: calc(100% - 48rpx);
			height: 100%;
			overflow: auto;
      .area{
        width: 100%;
        background-color: #FFFFFF;
        margin-top: 16rpx;
        border-radius: 24rpx;
      }
			.cell-column {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: center;
				height: 104rpx;
        padding: 0 24rpx;
				.cell-text {
					width: 184rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 32rpx;
					margin: 24rpx 0;
				}

				.cell-option {
					position: relative;
					width: 100%;
					height: 100%;
					flex: 1;

					.selector {
						height: 80rpx;
						width: 100%;
						background: #F7F9FA;
						position: relative;

						.selectIcon {
							position: absolute;
							top: 20rpx;
							right: 24rpx;
							height: 40rpx;
							width: 40rpx;
						}
					}

					.selector-input {
						height: 80rpx;
						line-height: 80rpx;
						width: 100%;
						font-size: 28rpx;
						padding-left: 32rpx;
						border-radius: 8rpx;
            background: #FFFFFF;
					}

					.input {
						// width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						padding-left: 32rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
					}
				}
			}
		}

		.my-footer {
			position: fixed;
			bottom: 34rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 598rpx;
			height: 84rpx;
			background: #3FAA73;
			border-radius: 44rpx 44rpx 44rpx 44rpx;

			.text {
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
			}

			.text-left {
				width: 264rpx;
				height: 84rpx;
				background: #ECEFF1;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin-left: 34rpx;
			}

			.text-right {
				width: 408rpx;
				height: 84rpx;
				background: #3FAA73;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin-right: 32rpx;
			}
		}

		.my-footer2 {
			position: fixed;
			bottom: 34rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			line-height: 84rpx;
			text-align: center;

			.text-left {
				width: 264rpx;
				height: 84rpx;
				background: #FFFFFF;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin-left: 34rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.8);
			}

			.text-right {
				width: 408rpx;
				height: 84rpx;
				background: #3FAA73;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin-right: 32rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>